<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>新增机具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <script src="../../../../bangnuo/vue/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../../../bangnuo/vue/axios.min.js"></script>
    <script type="module" src="./config/public.js"></script>
</head>

<body>
<div id="app">
    <el-form  ref="form" :model="form"  label-width="80px">
        <el-form-item label="机具名称">
            <el-input v-model="form.name" placeholder="请输入机具名称"></el-input>
        </el-form-item>

        <el-form-item label="机具sn号">
            <el-input v-model="form.sn" placeholder="请输入sn号"></el-input>
        </el-form-item>

        <el-form-item label="代理商">
            <el-select v-model="agentId" placeholder="请选择" @change="findCommercialByAgentId">
                <el-option
                        v-for="item in agent"
                        :key="item.id"
                        :label="item.companyName"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="商户">
                <el-select v-model="form.commercialTenantId" placeholder="请选择" @change="findMerchantsByCommercialId">
                    <el-option
                            v-for="item in commercial"
                            :key="item.id"
                            :label="item.companyName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-input>
        </el-form-item>

        <el-form-item label="门店">
                <el-select v-model="form.shopId" placeholder="请选择" @change="findShopName">
                    <el-option
                            v-for="item in merchants"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="save">立即创建</el-button>
            <el-button @click="returnBreak">取消</el-button>
        </el-form-item>
    </el-form>
</div>

<script type="module">
    import bnApi from './config/public.js';
    var vue = new Vue({
        el: '#app',
        data: {
            agent: [],
            commercial:[],
            merchants:[],
            form:{
                encryptionKey: "",
                key: "",
                name: "",
                num: "",
                shopId: "",
                shopName: "",
                sn: "",
                commercialTenantId:""
            },
            agentId:'',
            commercialId:''
        },
        methods:{
            findAgent:function () {
                bnApi.requestGet("/agentEntity/findAll").then(res=>{
                   if(res.success){
                       this.agent = res.object;
                   }
                });
            },
            //查询商户
            findCommercialByAgentId:function(){
                console.log("agentId",this.agentId);
                bnApi.requestGet("/commercial/findByAgentId/"+this.agentId).then(res=>{
                    if(res.success){
                        this.commercial = res.object;
                    }
                });
            },
            //门店名称
            findShopName:function(){
                console.log("门店",this.form.shopId)
                for(let i=0;i<this.commercial.length;i++){
                    if(this.commercial[i].id == this.form.shopId){
                        this.form.shopName = this.commercial[i].shopName;
                    }
                }
            },
            findMerchantsByCommercialId:function(){
              bnApi.requestGet("/merchantsEntity/findByCommercialIdNew/"+this.form.commercialTenantId).then(res=>{
                    if(res.success){
                        this.merchants = res.object;
                    }
              });
            },
            //保存
            save:function () {
                bnApi.requestPost("/terminalEntity/addNew",this.form).then(res=>{
                    if(res.success){
                        window.parent.location.reload();
                    }else{
                        this.$message.error('错了哦，请重试');
                    }
                });
            },
            returnBreak:function () {
                window.parent.location.reload();
            }
        },
        mounted(){
            this.findAgent();
        }
    });
</script>
</body>

</html>